<form
  (submit)="changePassword()"
  [formGroup]="form"
  class="cx-reset-new-password-form-component"
>
  Enter new password for account: email@address.com
  <div class="form-group">
    <label>
      <span class="label-content">New Password</span>
      <input
        class="form-control"
        [ngClass]="{
          'is-invalid':
            form.get('password').invalid && form.get('password').dirty
        }"
        placeholder="Password"
        type="password"
        formControlName="password"
      />
    </label>
    <div class="invalid-feedback">Invalid password format</div>
  </div>
  <div class="form-group">
    <label>
      <span class="label-content">Confirm new password</span>
      <input
        class="form-control"
        [ngClass]="{
          'is-invalid':
            form.get('password').value != form.get('repassword').value &&
            form.get('repassword').dirty
        }"
        placeholder="Confirm password"
        type="password"
        formControlName="repassword"
      />
    </label>
    <div class="invalid-feedback">Both passwords must match</div>
  </div>
  <div class="form-group">
    <button
      class="btn btn-block btn-primary"
      type="submit"
      [disabled]="form.invalid"
    >
      Reset
    </button>
  </div>
</form>
